<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表博文</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .main{
            width: 100%;
            height: 100%;
            background: #fff;
        }
        #article-content li{
            list-style: inherit;
        }
    </style>
    <!-- layui -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" />
    <!-- 标签编辑器 -->
    <link rel="stylesheet" href="/plugins/tag-editor/jquery.tag-editor.css" />
    <!-- editormd富文本编辑器 -->
    <link rel="stylesheet" href="/plugins/editormd/css/editormd.css" />
</head>
<body>
<div class="main">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <#if article == null>
            <legend>发表博文</legend>
        <#else>
            <legend>编辑博文</legend>
        </#if>
    </fieldset>
    <!--判断是编辑文章，还是发表文章，觉得表单提交路径-->
    <#if article == null>
        <form class="layui-form layui-form-pane" action="/article/publish" method="post">
    <#else>
        <form class="layui-form layui-form-pane" action="/article/update" method="post">
    </#if>
        <input type="hidden" name="aid" value="${article.aid}" />
      <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-inline">
              <input type="text" name="title" value="${article.title}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">文章标签</label>
          <div class="layui-input-inline">
            <input type="text" id="tags" name="tags" value="${tags}" class="layui-input"/>
          </div>
        </div>
      </div>
      
      <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
          <select name="categoryId" lay-verify="required">
            <option value="">请选择分类</option>
              <#list categoryList as c>
                  <#if article.categoryId == c.cid>
                      <option value="${c.cid}" selected="">${c.cname}</option>
                  <#else>
                      <option value="${c.cid}">${c.cname}</option>
                  </#if>
              </#list>
          </select>
        </div>
      </div>
        <div class="layui-upload">
            <!--<button type="button" class="layui-btn" id="picBtn">文章配图</button>-->
            <input type="file" class="layui-btn" id="picBtn" name="editormd-image-file">文章配图</input>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="artiPic">
                <p id="demoText"></p>
            </div>
            <input type="hidden" id="imgUrl" name="imgUrl" value="${article.imgUrl}">
        </div>

        <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">摘要</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="summary">${article.summary}</textarea>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">博客内容</label>
        <div class="layui-input-block" id="article-content">
          <textarea placeholder="请输入内容" class="layui-textarea" name="contentMd" id="contentMd">${article.contentMd}</textarea>
          <!--<textarea style="display:none;" name="content_md">### Custom toolbar</textarea>-->
        </div>
      </div>

      <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" lay-filter="publisharticle">保存文章</button>
      </div>
    </form>
</div>
<!-- layui -->
<script src="/plugins/layui/layui.js"></script>
<!-- jquery -->
<script src="/plugins/jquery/jquery.min.js"></script>
<!-- 标签编辑器 -->
<script src="/plugins/tag-editor/jquery.tag-editor.js"></script>
<!-- 富文本编辑器，依赖jquery -->
<script src="/plugins/editormd/editormd.js"></script>
<script>
layui.use(['jquery','form','upload'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,upload = layui.upload;
  var $=layui.jquery;
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#picBtn'
        ,url:'/article/uploadImg'
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#artiPic').attr('src', result); //图片链接（base64）
            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code == 0){
                return layer.msg('上传失败');
            }
            //上传成功,添加返回的url到隐藏的input中
            $('#imgUrl').val(res.url);
        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });
  //监听提交
  form.on('submit(publisharticle)', function(data){
    //console.log(data);
    return true;
  });
  $("#tags").tagEditor();
});
</script>
<script>
    $(function(){
        //定义编辑器
        var testEditor = editormd("article-content", {
            width: "90%",
            height: 640,
            path : '/plugins/editormd/lib/',
            codeFold : true,
            watch : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            htmlDecode : "style,script,iframe|on*",
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            /*toolbarIcons : function() {return ["undo", "redo", "|","bold", "del", "italic", "quote", "ucwords", "|", "h1", "h2", "h3", "h4", "|","list-ul", "list-ol", "hr", "|","link", "image", "code", "code-block", "table", "emoji", "||","watch", "preview", "fullscreen", "clear", "|"]},
             toolbarIconsClass : {
             testIcon : "fa-gears"  // 指定一个FontAawsome的图标类
             },*/
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/uploadImg"
        });
    })
</script>
</body>
</html>